<template>
  <div>
    <div>
      <el-input placeholder="请输入内容" class="input-with-select">
        <el-button slot="append" icon="el-icon-search">搜索</el-button>
      </el-input>
      <el-button type="primary" class="addTo" icon="el-icon-circle-plus-outline" @click="dialogVisible2=true"
        >添加</el-button
      >
    </div>
    <div>
      <el-table :data="allMeal" style="width: 100%">
        <el-table-column prop="_id" label="套餐编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="normalPrice" label="价格"> </el-table-column>
        <el-table-column prop="salePrice" label="打折价格"> </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <div class="btn">
            <el-button type="primary" icon="el-icon-edit" @click="clickUpdata(scope.row._id)">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="delMeals(scope.row._id)">删除</el-button>
          </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 修改 -->
      <el-dialog
        title="修改套餐"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <label for="">套餐编号</label>
          <el-input v-model=" data._id" placeholder="请输入内容"></el-input>
        </div>
        <div>
         <label for=""> 几个月套餐：</label>
         <el-input v-model="data.mouth" placeholder="请输入内容"></el-input>
        </div>
        <div>
         <label for=""> 价格：</label>
         <el-input v-model="data.salePrice" placeholder="请输入内容"></el-input>
        </div>
        <div>
          <label for="">打折后价格：</label><el-input v-model="data.normalPrice" placeholder="请输入内容"></el-input>
        </div>
        <div><label for=""> 是否推荐：</label> <el-switch v-model=" data.type" active-text="是" inactive-text="否"></el-switch></div>
        <div>
       <label for=""> 套餐名称：</label><el-input v-model="data.name" placeholder="请输入内容"></el-input>
        </div>


        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updataMeals"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 添加 -->
      <el-dialog
        title="添加套餐"
        :visible.sync="dialogVisible2"
        width="30%"
        :before-close="handleClose2"
      >
        
        <div>
         <label for=""> 几个月套餐：</label>
         <el-input v-model="data2.mouth2" placeholder="请输入内容"></el-input>
        </div>
        <div>
         <label for=""> 价格：</label>
         <el-input v-model="data2.salePrice2" placeholder="请输入内容"></el-input>
        </div>
        <div>
          <label for="">打折后价格：</label><el-input v-model="data2.normalPrice2" placeholder="请输入内容"></el-input>
        </div>
        <div><label for=""> 是否推荐：</label> <el-switch v-model=" data2.type2" active-text="是" inactive-text="否"></el-switch></div>
        <div>
       <label for=""> 套餐名称：</label><el-input v-model="data2.name2" placeholder="请输入内容"></el-input>
        </div>


        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addMeals"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allMeal: [],
      dialogVisible: false,
      dialogVisible2: false,
      data:{
        _id:'',
      mouth:'',
      salePrice:'',
      normalPrice:'',
      type:1,
      name:'',
      },
      data2:{
      mouth2:'',
      salePrice2:'',
      normalPrice2:'',
      type2:1,
      name2:'',
      }
    };
  },
  mounted() {
    this.getAllMeals();
    // this.updataMeals();
  },
  methods: {
    async getAllMeals() {
      const res = await this.$http.meal.getAllMeal();
      this.allMeal = res.data.data;
      console.log(res);
    },
    async updataMeals() {
      const data = {
        _id: this.data._id,
        mouth: this.data.mouth,
        salePrice: this.data.salePrice,
        normalPrice: this.data.normalPrice,
        type: this.data.type,
        name: this.data.name,
      };
      const res = await this.$http.meal.updataMeal(data);
      console.log(res);
      this.dialogVisible = false
      this.getAllMeals()
    },
    async addMeals(){
        const data = {
          mouth: this.data2.mouth2,
         salePrice: this.data2.salePrice2,
         normalPrice: this.data2.normalPrice2,
         type: this.data2.type2,
         name: this.data2.name2,
        }
       const res = await this.$http.meal.addMeal(data)
        console.log(res);
        this.dialogVisible2 = false
        this.getAllMeals()
    },
    async delMeals(_id){
        const res = await this.$http.meal.delMeal(_id)
        console.log(res);
        this.getAllMeals()
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleClose2(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      clickUpdata(_id){
          this.data._id = _id
          console.log(_id);
          this.dialogVisible = true
      }
    

  },
};
</script>

<style lang="scss" scoped>
.el-input-group {
  width: 45%;
  margin: 20px 0 30px 25px;
}
.addTo {
  margin-left: 20px;
}
.btn{
  display: flex;
}
.el-dialog div{
  display: flex;
  margin: 10px 0 0 0;
  justify-content: space-between;
  align-items: center;

}
.el-dialog label{
  width: 170px;
  margin-top: 10px;
}
</style>